<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<script src="../../js/lib/jquery-v3.0.0/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<title>Document</title>
	<style type="text/css">
		label{
			font-size: 20px;
		}
		input[type="checkbox"]{
			display: inline-block;
			width: 20px;
			height: 20px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<h1>测试label标签内含标签会触发两次click事件</h1>
	<p>1. 包含的情况下，只对label订阅click事件</p>
	<label id="lbl1">label wrap input:<input type="checkbox" id="ck1"/></label><br />
	<p>结果：</p>
	<ol type="I">
		<li>点击label标签，会触发2次click事件，依次是label触发->input触发，原因是label标签把input标签关联起来了，点击label标签,label标签触发了input的click事件,然后input标签的click事件冒泡到label，所以触发了2次labele的click事件</li>
		<li>点击CheckBox则只会冒泡触发一次label标签的click事件</li>
	</ol>
	<p>2. 包含的情况下，对label,checkbox订阅click事件</p>
	<label id="lbl2">label wrap input:<input type="checkbox" id="ck2"/></label>
	<p>结果：</p>
	<ol type="I">
		<li>点击label标签，会触发3次click事件,依次是label触发->input触发->label触发，多的一次响应，就是给input订阅的click事件，在上面只是没有对input的click事件添加订阅而已</li>
		<li>点击CheckBox则只会冒泡触发2次</li>
	</ol>
	<br />
	<p>3. 使用for属性，只对label订阅click事件</p>
	<label id="lbl3" for="ck3">label for input:</label><input type="checkbox" id="ck3"/><br />
	<p>结果：</p>
	<ol type="I">
		<li>点击label，只会触发label的事件，因为不存在包含，所以只触发一次</li>
		<li>点击checkbox同上</li>
	</ol>
	<p>4. 使用for属性，只对label订阅click事件</p>
	<label id="lbl4" for="ck4">label for input:</label><input type="checkbox" id="ck4"/>
	<p>结果：</p>
	<ol type="I">
		<li>点击label，会触发label的事件，然后触发checkbo的事件</li>
		<li>点击checkbox,只会触发自身</li>
	</ol>
</body>
</html>